﻿@model WebExtras.JQPlot.JQPlotChartBase

<div class="well ui-well">
  <h4>Creating the jqPlot options</h4>
  jqPlot graph options are created by instantiating the <strong>WebExtras.JQPlot.JQPlotOptions</strong> class.
  <pre><code>
  <span class="comment">// Some basic options are shown below</span>
  JQPlotOptions options = new JQPlotOptions
  {
    title = new TitleOptions("Line Graph")
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating the graph data</h4>
  jqPlot uses a 2 dimensional numeric array for data. This can be of any numeric type <strong>int, decimal, float or
  double</strong>. In order to compensate for numerals WebExtras uses the biggest of the numeral types provided by .NET - 
  <strong>double</strong>
  <pre><code>
  List&lt;double[]&gt; graphData = new List&lt;double[]&gt;();
  
  <span class="comment">// Notice that each individual array added to the 'graphData' variable has 2 columns</span>
  <span class="comment">// The first column is your X co-ordinate and the second is your Y co-ordinate</span>

  graphData.Add(new double[] { 1, 5 });                            
  graphData.Add(new double[] { 2, 10 });

  <span class="comment">// ... and so on</span>
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating the jqPlot Chart</h4>
  All the things we have done so far now get bundled into a jqPlot chart by instantiating the <strong>WebExtras.JQPlot.JQPlotChart</strong> object.
  <pre><code>
  <span class="comment">// Notice that the <span class="highlight">chartData</span> property is a list, giving the flexibility of rendering multiple data series in the same graph</span>
  JQPlotChart chart = new JQPlotChart
  {
    chartData = new List&lt;double[][]&gt; { graphData.ToArray() },
    chartOptions = options
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Now in your HTML</h4>
  Now that all C# bindings are done, it is time to render our graph. This can be done with a little bit of Javascript.
  <pre><code>
  @@model WebExtras.JQPlot.JQPlotChartBase
  ....
    ....
    ....
  <span class="comment">// Note that unlike Flot where we specify the jQuery DIV element, here we specify only the HTML ID of the DIV tag</span>
  $.jqplot('line-graph', @@Html.Raw(Model.chartData.ToJson()), @@Html.Raw(Model.chartOptions.ToString()));
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And finally the output...</h4>
  <div class="content">
    <div id="line-graph" class="graph">
    </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {

      $.jqplot('line-graph', @Html.Raw(Model.chartData.ToJson()), @Html.Raw(Model.chartOptions.ToString()));
    });
  </script>
</div>
